<template>
	<div style="margin: 50px;">
		<div class="clearfloat" style="float: left;">
			<el-button type="primary" @click="dialogFormVisible = true">添加课件</el-button>
		</div>

		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item>
				<el-input v-model="formInline.coursewareName" placeholder="可输入文件名字"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onSubmit(formInline)">搜索</el-button>
			</el-form-item>
		</el-form>
		<div style="text-align: center;">

			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">

				<el-table-column prop="coursewareName" label="课件名称" width="150"> </el-table-column>
				<el-table-column prop="coursewareSize" label="课件大小(KB)" width="150"></el-table-column>
				<el-table-column prop="coursewareAddtime" label="发布时间" :formatter="dateFormat" width="240"> </el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">

						<el-button class="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.coursewareId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--分页-->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-dialog title="添加课件" :visible.sync="dialogFormVisible">
			<el-form :model="addForm" label-width="180px" ref="addForm">

				<el-form-item label="课件名称：">
					<el-input v-model="addForm.coursewareName"></el-input>
				</el-form-item>
				<el-upload class="upload-demo" action="/api/teacher/courseware/upload" :on-preview="handlePreview" 
					:on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" 
					accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,.csv,text/plain"

					:on-exceed="handleExceed" :file-list="fileList" :onError="uploadError" :onSuccess="uploadSuccess">
					 <el-button size="small" type="primary">添加课件</el-button>
				</el-upload>
			</el-form>
			<span slot="footer" class="dialog-footer">
   				 <el-button @click="dialogFormVisible=false">取 消</el-button>
   					 <el-button type="primary" @click="addCourseware">确 定</el-button>
 			 </span>
		</el-dialog>

	</div>
</template>

<script>
	import { coursewareList, coursewareDelete, coursewareInsert } from '@/axios/api'
	import { formatDate } from '@/axios/date.js'
	export default {
		data() {
			return {
				dialogFormVisible: false,
				addForm: {
					resourceId: 1,
					coursewareName: '',
					coursewareSize: 999,
					coursewarePath: '',
					coursewareAddtime: '',
					coursewareDelete: 1,
	
				},
				pageIndex: 1,
				pageSize: 10,
				total: 0,
				formInline: {
					coursewareName: ''
				},
				tableData: [],
				fileList: []

			}
		},

		methods: {
			/*submitUpload() {
				this.$refs.upload.submit();
			},*/
			// 上传成功后的回调
			uploadSuccess(response, file, fileList) {
				console.log('上传文件', response, fileList),
				this.addForm.coursewarePath=response.resData
				//this.addForm.coursewareSize=fileList.size
			},
			// 上传错误
			uploadError(response, file, fileList) {
				console.log('上传失败，请重试！')
			},

			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			//点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据
			handlePreview(file) {
				console.log('文件', file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},

			/*日期格式化*/
			dateFormat(row, column) {
				var date = row[column.property];
				//console.log(date);
				return formatDate(new Date(date), 'yyyy-MM-dd');
			},
			/*分页*/
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				//this.pageIndex = pageIndex;
				/*let param = {
					pageIndex: val
				};
				console.log(param);
				coursewareList(param).then(res => {
					this.tableData = res.resData.list,
						this.total = res.resData.total
				})*/
				this.pageIndex = val;
				this.onSubmit();
			},
			/*显示课件列表*/
			coursewareList1() {
				let param = {
					pageIndex: this.pageIndex
				};
				coursewareList(param).then(res => {
					this.tableData = res.resData.list,
						this.total = res.resData.total
				})
			},

			/*查询课件
			 文件类型查询未实现
			 * */
			onSubmit() {
				console.log(this.formInline.coursewareName);
				let params = {
					pageIndex: this.pageIndex,
					name: this.formInline.coursewareName
				}
				coursewareList(params).then(res => {
					this.tableData = res.resData.list,
						this.total = res.resData.total
				})

			},

			/*根据id删除课件
			 需要修改返回message
			 * */
			handleDelete(coursewareId) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					type: 'warning',
					center: true
				}).then(() => {
					let param = {
						id: coursewareId
					};
					coursewareDelete(param).then(res => {
						if(res.status == 200) {
							this.$message({
								message: res.message,
								type: 'success'
							});
							this.coursewareList1();
						} else {
							this.$message({
								message: res.message,
								type: 'info'
							})
						};
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '删除失败'
						});
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除'
					});
				});

			},
			/*添加课件*/
			addCourseware() {
				this.addForm.coursewareAddtime=formatDate(new Date(),"yyyy/MM/dd");
				console.log(this.addForm);
				//alert(this.addForm);
				coursewareInsert(this.addForm).then(res => {
					if(res.status == 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.addForm.coursewareName='',
						this.addForm.coursewarePath='',
						this.dialogFormVisible=false,
						this.coursewareList1()
					} else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消添加'
					});
				});

			}

		},
		mounted() {
			this.coursewareList1();
			

		}

	}
</script>
<style type="text/css" scoped="scoped">
	input {
		width: 200px;
		height: 30px;
	}
</style>